{% extends 'base.html' %}

{% block content %}
<style>
  tr {
    line-height: 60px;
  }
</style>
<div class="pagetitle">
  <ul class="breadcrumb">
    <li class="breadcrumb-item">景点数据集</li>
    <li class="breadcrumb-item active">数据列表</li>
  </ul>
</div>
<section class="section dashboard">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>序号</th>
                <th>省份</th>
                <th>城市</th>
                <th>景点名称</th>
                <th>景区等级</th>
                <th>门票价格</th>
                <th>景区评分</th>
                <th>感兴趣人数</th>
                <th>封面</th>
                <th>详情</th>
              </tr>
            </thead>
            <tbody>
              {% for i in page_obj %}
              <tr>
                <th>{{ i.id }}</th>
                <td>{{ i.province }}</td>
                <td>{{ i.city }}</td>
                <td>{{ i.title }}</td>
                <td>{{ i.level }}</td>
                <td>{{ i.price }}元</td>
                <td><span class="badge bg-success">{{ i.score }}分</span></td>
                <td>{{ i.interestNum }}</td>
                <td><img style="width:60px;height: 60px;" src="{{ i.cover }}" alt=""></td>
                <td>
                  <a href="/app/detail?id={{ i.id }}&page={{ page }}">查看</a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>

          页码：{{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 

          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
          {% else %}
            第一页
          {% endif %}

          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">下一页</a>
          {% else %}
            尾页
          {% endif %}

        </div>
      </div>

    </div>

  </div>
</section>
{% endblock %}

{% block js %}
<script>

</script>
{% endblock %}